<template>
  <div class="tag_show_wrap">
    <el-row
      v-for="(lineNum, index) in tagTotalLines"
      :key="lineNum + index"
    >
      <el-col
        class="category_path_col"
        v-for="tag in tagList.slice(index * tagColNum, lineNum * tagColNum)"
        :key="tag[tagKey]"
        :span="24 / tagColNum"
      >
      <el-tooltip effect="dark" :content="tileTagVal ? tag : tag[contentKey]">
        <el-tag
          :closable="closable"
          :type="tagType"
          @close="handleDeleteTag(tag)"
        >
          <span class="category_path_tag">{{tileTagVal ? tag : tag[contentKey]}}</span>
        </el-tag>
      </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { queryLevel4CategoryPathListService } from '@/api/supplier/components';
export default {
  props: {
    dataSource: { // 数据源
      type: Array,
      default () { return []; }
    },
    tagColNum: { // 每行tag数量
      type: Number,
      default: 2
    },
    tagKey: { // tag表示字段key
      type: String,
      default: 'categoryUuid'
    },
    contentKey: { // tag展示文本字段key
      type: String,
      default: 'categoryPath'
    },
    closable: { // 是否展示tag删除按钮
      type: Boolean,
      default: false
    },
    tagType: { // tag类型
      type: String,
      default: 'info'
    },
    handleDelete: { // tag移除方法
      type: Function,
      default: () => {}
    },
    tileTagVal: { // 是否是平铺tag值，比如['sfdfsd', 'werew']
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    uuidKey: {
      type: String,
      default: 'categoryUuid'
    }
  },
  data () {
    return {
      tagList: []
    }
  },
  computed: {
    // tag总条数
    tagTotalLines () {
      return Math.ceil(this.tagList.length / this.tagColNum)
    },
  },
  watch: {
    dataSource: {
      deep: true,
      immediate: true,
      handler (val) {
        this.getShowTagsData(val);
      }
    }
  },
  methods: {
    // 移除tag
    handleDeleteTag (tag) {
      this.handleDelete(tag);
    },
    async getShowTagsData (list) {
      if (list.length === 0) { return false; }
      const hasPath = list.some(item => item.categoryPath);
      if (hasPath) {
        this.tagList = list;
        return false;
      };
      const data = { level4Uuids: list.map(item => item[this.uuidKey]) }
      let loadingInstance = this.$loading({ target: '.tag_show_wrap' });
      const res = await queryLevel4CategoryPathListService(data);
      loadingInstance.close();
      if (res) {
        this.tagList = res.result;
      }
    },
  }
}
</script>
<style lang="less" scoped>
.category_path_tag {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category_path_col {
  margin-bottom: 10px;
  /deep/ .el-tag__close {
    top: -7px !important;
  }
}
.tag_show_wrap {
  padding: 10px;
  margin-left: 10px;
  max-height: 600px;
  overflow: auto;
}
</style>
